<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>Wizard Test Page</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/Wizard_test.css">
</head>

<body class="wizard_test1auto">

	<div class="stretch">
		<ui5-wizard id="wizTest">
			<ui5-wizard-step id="st1" icon="sap-icon://product" selected title-text="Product type">
				<div class="wizard_test2auto">
					<ui5-title>1. Product Type</ui5-title><br>

					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
					</ui5-message-strip><br>

					<ui5-label>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
					</ui5-label>

					<ui5-input id="inpStepChangeCounter"></ui5-input>
					<ui5-button id="btnOpenDialog" class="wizard_test3auto">Open Wizard Dialog</ui5-button>

					<div class="wizard_test4auto">
						<ui5-label>Configure step-switch-threshold</ui5-label>
						<ui5-segmented-button id="setting">
							<ui5-toggle-button threshold="0.3">0.5</ui5-toggle-button>
							<ui5-toggle-button threshold="0.7" pressed>default (0.7)</ui5-toggle-button>
							<ui5-toggle-button threshold="1">1</ui5-toggle-button>
						</ui5-segmented-button>
					</div>

				</div>

				<ui5-button id="toStep2" design="Emphasized">Step 2</ui5-button>
			</ui5-wizard-step>

			<ui5-wizard-step  id="st2" title-text="Product Information" disabled>
				<div class="wizard_test5auto">
					<ui5-title>2. Product Information</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
					</ui5-label>

					<ui5-input id="inpStepChangeCause" placeholder="step changed via click"></ui5-input>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Name</ui5-label>
							<ui5-input placeholder="product name..."></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Weight</ui5-label>
							<ui5-input value="3.65"></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Manifacturer</ui5-label>
							<ui5-select>
								<ui5-option selected>Apple</ui5-option>
								<ui5-option>Samsung</ui5-option>
								<ui5-option>Huawei</ui5-option>
							</ui5-select>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>5 years guarantee included</ui5-label>
							<ui5-switch id="sw"></ui5-switch>
						</div>

						<span id="scrollMarkerSt2"></span>
						<div id="pureContent" class="wizard_test8auto">
						</div>
					</div>
				</div>

				<ui5-button id="toStep3" design="Emphasized">Step 3</ui5-button>
			</ui5-wizard-step>

			<ui5-wizard-step  id="st3" title-text="Options" disabled>
				<div class="wizard_test6auto">
					<ui5-title>3. Options</ui5-title><br>

					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
					</ui5-message-strip><br>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Manifacture date</ui5-label>
							<ui5-date-picker></ui5-date-picker>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Availability</ui5-label>
							<ui5-segmented-button id="segButton1">
								<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
								<ui5-toggle-button>In depot</ui5-toggle-button>
								<ui5-toggle-button>Damaged</ui5-toggle-button>
								<ui5-toggle-button>Out of stock</ui5-toggle-button>
							</ui5-segmented-button>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Size</ui5-label>
							<ui5-segmented-button id="sb">
								<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
								<ui5-toggle-button>Medium</ui5-toggle-button>
								<ui5-toggle-button>Large</ui5-toggle-button>
							</ui5-segmented-button>
						</div>
					</div>
				</div>

				<span id="scrollMarkerSt3"></span>

				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
				<ui5-button id="toStep4" design="Emphasized">Step 4</ui5-button>
			</ui5-wizard-step>

			<ui5-wizard-step  id="st4" title-text="Pricing" disabled>
				<div class="wizard_test6auto">
					<ui5-title>4. Pricing</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
					</ui5-message-strip><br>

					<div class="wizard_test6auto">
						<div class="wizard_test7auto">
							<ui5-label>Price</ui5-label>
							<ui5-input placeholder="product price..."></ui5-input>
						</div>

						<div class="wizard_test7auto">
							<ui5-label>Quantity</ui5-label>
							<ui5-input placeholder="product quantity..."></ui5-input>
						</div>

						<div class="wizard_test4auto">
							<ui5-label>Vat included</ui5-label>
							<ui5-switch checked></ui5-switch>
						</div>
					</div>
				</div>

				<ui5-button id="toStep5" design="Emphasized">Step 5</ui5-button>
			</ui5-wizard-step>

			<ui5-wizard-step  id="st5" title-text="Optional step to finish the example with very long, long, long, long, long, long, long, long, long text" subtitle-text="(Optional)" disabled>
				<div class="wizard_test6auto">
					<ui5-title>5. Optional step</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
					</ui5-message-strip><br>
				</div>
				<span id="scrollMarkerSt5"></span>

				<ui5-button id="toStep6" design="Emphasized">Step 6</ui5-button>
			</ui5-wizard-step>
			<ui5-wizard-step  id="st5" title-text="Final step to finish the example with very long, long, long, long, long, long, long, long, long text" disabled>
				<div class="wizard_test6auto">
					<ui5-title>6. Final step</ui5-title><br>
					<ui5-label>
						Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
					</ui5-label>
					<ui5-message-strip>
						The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
					</ui5-message-strip><br>
					<span id="scrollMarkerSt6"></span>
				</div>

				<ui5-button id="finalize" design="Emphasized">Finalize</ui5-button>
			</ui5-wizard-step>
		</ui5-wizard>

		<ui5-dialog id="dialog" stretch header-heading="Wizard">
				<ui5-wizard id="wizInDialog">
					<ui5-wizard-step icon="sap-icon://product" selected title-text="Product type">
						<div class="wizard_test2auto">
							<ui5-title>1. Product Type</ui5-title><br>

							<ui5-message-strip>
								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
							</ui5-message-strip><br>

							<ui5-label>Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet, feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor, nec dignissim quam convallis ut. Praesent vitae commodo felis, ut iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh. Suspendisse est velit, scelerisque ut commodo eget, dignissim quis metus. Cras faucibus consequat gravida. Curabitur vitae quam felis. Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam erat volutpat.
							</ui5-label>

							<ui5-input></ui5-input>
						</div>

						<ui5-button id="toStep2InDialog" design="Emphasized">Step 2</ui5-button>
					</ui5-wizard-step>

					<ui5-wizard-step title-text="Product Information">
						<div class="wizard_test5auto">
							<ui5-title>2. Product Information</ui5-title><br>
							<ui5-label>
								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
							</ui5-label>

							<div class="wizard_test6auto">
								<div class="wizard_test7auto">
									<ui5-label>Name</ui5-label>
									<ui5-input placeholder="product name..."></ui5-input>
								</div>

								<div class="wizard_test4auto">
									<ui5-label>Weight</ui5-label>
									<ui5-input value="3.65"></ui5-input>
								</div>

								<div class="wizard_test4auto">
									<ui5-label>Manifacturer</ui5-label>
									<ui5-select>
										<ui5-option selected>Apple</ui5-option>
										<ui5-option>Samsung</ui5-option>
										<ui5-option>Huawei</ui5-option>
									</ui5-select>
								</div>

								<div class="wizard_test4auto">
									<ui5-label>5 years guarantee included</ui5-label>
									<ui5-switch id="sw2"></ui5-switch>
								</div>


								<div id="pureContent2" class="wizard_test8auto">
								</div>
							</div>
						</div>

						<ui5-button id="toStep3InDialog" design="Emphasized">Step 3</ui5-button>
					</ui5-wizard-step>

					<ui5-wizard-step title-text="Options">
						<div class="wizard_test6auto">
							<ui5-title>3. Options</ui5-title><br>

							<ui5-label>
								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
							</ui5-label>
							<ui5-message-strip>
								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
							</ui5-message-strip><br>

							<div class="wizard_test6auto">
								<div class="wizard_test7auto">
									<ui5-label>Manifacture date</ui5-label>
									<ui5-date-picker></ui5-date-picker>
								</div>

								<div class="wizard_test7auto">
									<ui5-label>Availability</ui5-label>
									<ui5-segmented-button>
										<ui5-toggle-button icon="employee" pressed>In stock</ui5-toggle-button>
										<ui5-toggle-button>In depot</ui5-toggle-button>
										<ui5-toggle-button>Damaged</ui5-toggle-button>
										<ui5-toggle-button>Out of stock</ui5-toggle-button>
									</ui5-segmented-button>
								</div>

								<div class="wizard_test7auto">
									<ui5-label>Size</ui5-label>
									<ui5-segmented-button>
										<ui5-toggle-button icon="employee" pressed>Small</ui5-toggle-button>
										<ui5-toggle-button>Medium</ui5-toggle-button>
										<ui5-toggle-button>Large</ui5-toggle-button>
									</ui5-segmented-button>
								</div>
							</div>
						</div>

						<ui5-button id="toStep4InDialog" design="Emphasized">Step 4</ui5-button>
					</ui5-wizard-step>

					<ui5-wizard-step title-text="Pricing">
						<div class="wizard_test6auto">
							<ui5-title>4. Pricing</ui5-title><br>
							<ui5-label>
								Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
							</ui5-label>
							<ui5-message-strip>
								The Wizard control is supposed to break down large tasks, into smaller steps, easier for the user to work with.
							</ui5-message-strip><br>

							<div class="wizard_test6auto">
								<div class="wizard_test7auto">
									<ui5-label>Price</ui5-label>
									<ui5-input placeholder="product price..."></ui5-input>
								</div>

								<div class="wizard_test7auto">
									<ui5-label>Quantity</ui5-label>
									<ui5-input placeholder="product quantity..."></ui5-input>
								</div>

								<div class="wizard_test4auto">
									<ui5-label>Vat included</ui5-label>
									<ui5-switch checked></ui5-switch>
								</div>
							</div>
						</div>

						<ui5-button design="Emphasized">Finalize</ui5-button>
					</ui5-wizard-step>
				</ui5-wizard>
		</ui5-dialog>
	</div>

	<script>
		var wiz = document.getElementById("wizTest");
		var wizInDialog = document.getElementById("wizInDialog");
		var counter = 0;
		wiz.addEventListener("ui5-step-change", function (event) {
			console.log(event.detail.step);
			inpStepChangeCounter.value = `${++counter}`;
			inpStepChangeCause.value = `${!event.detail.withScroll}`;
		});

		toStep2.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(1, wiz);
		});

		toStep22.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(1, wiz);
		});

		toStep3.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(2, wiz);
		});

		toStep4.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(3, wiz);
		});
		toStep5.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(4, wiz);
		});
		toStep6.addEventListener("click", function () {
			deselectAll(wiz);
			setStep(5, wiz);
		});

		toStep2InDialog.addEventListener("click", function () {
			deselectAll(wizInDialog);
			setStep(1, wizInDialog);
		});

		toStep3InDialog.addEventListener("click", function () {
			deselectAll(wizInDialog);
			setStep(2, wizInDialog);
		});

		toStep4InDialog.addEventListener("click", function () {
			deselectAll(wizInDialog);
			setStep(3, wizInDialog);
		});

		function deselectAll(wiz) {
			Array.from(wiz.children).forEach(function(step) {
				step.selected = false;
			});
		}

		function setStep(idx, wiz) {
			const step = getStep(idx, wiz);
			step.selected = true;
			step.disabled = false;
		}

		function getStep(idx, wiz) {
			return Array.from(wiz.children)[idx];
		}

		sw.addEventListener("ui5-change", function () {
			pureContent.style.display = "block";
		});

		sw2.addEventListener("ui5-change", function () {
			pureContent2.style.display = "block";
		});

		btnOpenDialog.addEventListener("click", function () {
			dialog.open = true;
		});

		setting.addEventListener("ui5-step-change", function (event) {
			wiz.setAttribute("step-switch-threshold", event.detail.selectedButton.getAttribute("threshold"));
		});
	</script>
</body>
</html>
